<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.sinodata.bsm.center.util.spring.SpringContextHolder"%>
<%@page import="com.sinodata.bsm.center.service.resource.ResService"%>
<%@ page import="com.sinodata.bsm.common.vo.*" %>
<%@ page import="com.sinodata.bsm.common.utils.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%
ResService service = SpringContextHolder.getBean(ResService.class);
String resid = request.getParameter("resid");

%>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<%@ include file="../include/taglib.jsp"%>
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/table.jsp"%>
	<%@ include file="../include/tooltip.jsp"%>
	<link href="/bsm/style/default/bsm/tab.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/style/default/bsm/appviewdetail.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jcarousellite_1.0.1.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
	
	
	<script type="text/javascript">
		var RTString ='<chart manageResize="1" showValue="1" chartBottomMargin="1" chartTopMargin="3" baseFontColor="00dd00" bgColor="000000" bgAlpha="100"   showTickMarks="0" origW="240" origH="250"  lowerLimit="0" upperLimit="200" numberSuffix="%" majorTMNumber="11" majorTMColor="646F8F"  majorTMHeight="9" minorTMNumber="2" minorTMColor="646F8F" minorTMHeight="3" majorTMThickness="1" decmials="0" ledGap="2" ledSize="2" ledBoxBorderThickness="1">\n\
			<colorRange>\n\
				<color minValue="0" code="00dd00" />\n\
			</colorRange>\n\
			<annotations>\n\
				<annotationGroup id="GRP1" showBelow="0" x="$gaugeCenterX" constrainedScale="0">\n\
					<annotation type="line" y="$gaugeStartY+1" toY="$gaugeEndY-1" color="000000" lineThickness="2" />\n\
				</annotationGroup>\n\
			</annotations>\n\
			<styles>\n\
				<definition>\n\
					<style type="animation" name="lineAnim" param="_yscale"  start="0" />\n\
				</definition>\n\
				<application>\n\
					<apply toObject="GRP1" styles="lineAnim" />\n\
				</application>\n\
			</styles>\n\
		'; 
			
		var memRTString ='<chart manageResize="1" showValue="1" chartBottomMargin="1" chartTopMargin="3" baseFontColor="00dd00" bgColor="000000" bgAlpha="100"   showTickMarks="0" origW="240" origH="250"  lowerLimit="0" numberSuffix="KB"  majorTMNumber="11" majorTMColor="646F8F"  majorTMHeight="9" minorTMNumber="2" minorTMColor="646F8F" minorTMHeight="3" majorTMThickness="1" decmials="0" ledGap="2" ledSize="2" ledBoxBorderThickness="1">\n\
			<colorRange>\n\
				<color minValue="0"  code="00dd00" />\n\
			</colorRange>\n\
			<annotations>\n\
				<annotationGroup id="GRP1" showBelow="0" x="$gaugeCenterX" constrainedScale="0">\n\
					<annotation type="line" y="$gaugeStartY+1" toY="$gaugeEndY-1" color="000000" lineThickness="2" />\n\
				</annotationGroup>\n\
			</annotations>\n\
			<styles>\n\
				<definition>\n\
					<style type="animation" name="lineAnim" param="_yscale"  start="0" />\n\
				</definition>\n\
				<application>\n\
					<apply toObject="GRP1" styles="lineAnim" />\n\
				</application>\n\
			</styles>\n\
		'; 
			
		var cntRTString ='<chart manageResize="1" showValue="1" chartBottomMargin="1" chartTopMargin="3" baseFontColor="00dd00" bgColor="000000" bgAlpha="100"   showTickMarks="0" origW="240" origH="250"  lowerLimit="0" upperLimit="20" numberSuffix="个"  majorTMNumber="11" majorTMColor="646F8F"  majorTMHeight="9" minorTMNumber="2" minorTMColor="646F8F" minorTMHeight="3" majorTMThickness="1" decmials="0" ledGap="2" ledSize="2" ledBoxBorderThickness="1">\n\
			<colorRange>\n\
				<color minValue="0"  code="00dd00" />\n\
			</colorRange>\n\
			<annotations>\n\
				<annotationGroup id="GRP1" showBelow="0" x="$gaugeCenterX" constrainedScale="0">\n\
					<annotation type="line" y="$gaugeStartY+1" toY="$gaugeEndY-1" color="000000" lineThickness="2" />\n\
				</annotationGroup>\n\
			</annotations>\n\
			<styles>\n\
				<definition>\n\
					<style type="animation" name="lineAnim" param="_yscale"  start="0" />\n\
				</definition>\n\
				<application>\n\
					<apply toObject="GRP1" styles="lineAnim" />\n\
				</application>\n\
			</styles>\n\
		'; 
	</script>
	
	<script type="text/javascript">
	
	
	//调整进程-端口的高度
	function adjustProcProtH(){
		var procH = $(".left-div2 .content1").height();
		var portH = $(".right-div2 .content1").height();
		
		if(procH>portH){
			$(".right-div2 .content1").css('height',procH+'px');
		}
		if(portH>procH){
			$(".left-div2 .content1").css('height',portH+'px');
		}
	}
	
	//调整文件-SQL-shell的高度
	function adjustFileSqlShellH(){
		var fileH = $(".file .content3").height();
		var sqlH = $(".sQL .content3").height();
		var shellH = $(".script .content3").height();
		var maxH = Math.max(fileH,Math.max(sqlH,shellH));
		
		$(".file .content3").css('height',maxH+'px');
		$(".sQL .content3").css('height',maxH+'px');
		$(".script .content3").css('height',maxH+'px');
		
	}
	
	function initCpuMem(){
		$.ajax({
			type:"POST",
			dataType:"json",
			url:'${pageContext.request.contextPath}/appview/app-detail!initAppDetailData.action',
			data:{
				resId:<%=resid%>
			},
			success:function(data){
			    //进程
			    $.each(data.procs,function(index,value){
			        var procStr = '<div class="container2"><b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>';
			        procStr+='<div class="content2"><ul><li class="ul_li_comm"><h3><a href="${pageContext.request.contextPath}/resource/res-query!view.action?id='+value.id+'&pId=0&viewId=1&ntype=2" target="_blank">'+value.name+'</a></h3></li>';
			        procStr+='<li class="ul_li_comm"><span class="left_s"><a class="status_tip status_'+value.status+'" rel="proc-state-legend.html" href="#" title="状态值含义">'+value.status+'</a></span><span class="right_s">'+(value.ip==null ? '' : value.ip)+'</span></li>';
			        procStr+='<li class="ul_li_comm"><div class="cpu"><fieldset><legend>CPU 使用率</legend><div id="proc_cpu_'+index+'" class="cpuLed proc_chart" cVal="'+value.cpu+'"></div></fieldset>';
			        procStr+='<fieldset><legend>内存 大小</legend><div  id="proc_mem_'+index+'" class="memLed proc_chart" mVal="'+value.mem+'"></div></fieldset>';
			        procStr+='</div></li><li class="ul_li_comm"><span class="left_s">运行时长：</span><span class="right_s">'+value.duration+'</span></li> </ul></div> ';
			        procStr+='<b class="b8"></b><b class="b7"></b><b class="b6"></b><b class="b5"></b></div>';
			        
			        $(".left-div2 .content1").append(procStr);
			    });
			    $(".left-div2 .content1").append('<br class="clear" />');
	     		
	     		$(".cpu .cpuLed").each(function(index,value){
	     		
	     			var divid = $(this).attr('id');
	     			var VRealLed = new FusionCharts("${pageContext.request.contextPath}/resources/charts/VLED.swf", divid+"_", "100%", "80", "0", "1" );
	     			var val = $(this).attr('cVal');
	     			VRealLed.setXMLData(RTString+'<value>'+val+'</value>\n\</chart>');
	     			VRealLed.render(divid);
	     		});
	     		
	     		$(".cpu .memLed").each(function(index,value){
	     			var divid = $(this).attr('id');
	     			var VRealLed = new FusionCharts("${pageContext.request.contextPath}/resources/charts/VLED.swf", divid+"_", "100%", "80", "0", "1" );
	     			var val =$(this).attr('mVal');
	     			VRealLed.setXMLData(memRTString+'<value>'+val+'</value>\n\</chart>');
	     			VRealLed.render(divid);
	     		});
	     		
					     		
	     		//端口
	     		$.each(data.ports,function(index,value){
	     			var portStr = '<div class="container2" style="width:160px;"><b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>';
	     			  portStr += '<div class="content2"><ul><li class="ul_li_comm"><h3 style="width:135px;"><a href="${pageContext.request.contextPath}/resource/res-query!view.action?id='+value.id+'&pId=0&viewId=1&ntype=2" target="_blank">'+value.name+'</a></h3></li>';
	     			if(value.status == 1){
		     		     portStr += '<li class="ul_li_comm"><span class="left_s "><a href="#" class="status_tip status_R" title="状态值含义|C 可以连通|D 不可连通|U 状态未知">C</a></span><span class="right_s">'+value.ip+'</span></li>';
	     			}else if(value.status == 0){
		     			 portStr += '<li class="ul_li_comm"><span class="left_s "><a href="#" class="status_tip status_bk" title="状态值含义|C 可以连通|D 不可连通|U 状态未知">D</a></span><span class="right_s">'+value.ip+'</span></li>';
	     			}else{
		     			 portStr += '<li class="ul_li_comm"><span class="left_s "><a href="#" class="status_tip status_bk" title="状态值含义|C 可以连通|D 不可连通|U 状态未知">U</a></span><span class="right_s">'+value.ip+'</span></li>';
	     			}
	     			portStr+='<li class="ul_li_comm"><div class="port_chart_div">';
	     			portStr+='<fieldset ><legend>连接数量</legend><div id="port_cnt_'+index+'" class="port_cnt" cVal="'+value.cnt+'"></div></fieldset>';
	     			portStr+='</li></ul></div><b class="b8"></b><b class="b7"></b><b class="b6"></b><b class="b5"></b></div>';

	     			$(".right-div2 .content1").append(portStr);    
	     		});
	     		$(".right-div2 .content1").append('<br class="clear" />');
	     		
	     		
	     		
	     		$(".port_chart_div .port_cnt").each(function(index,value){
	     			var port_d = $(this).attr('id');
	     			var VRealLed = new FusionCharts("${pageContext.request.contextPath}/resources/charts/VLED.swf", port_d+"_", "100%", "90", "0", "1" );
	     			var val =$(this).attr('cVal');
	     			VRealLed.setXMLData(cntRTString+'<value>'+val+'</value>\n\</chart>');
	     			VRealLed.render(port_d);
	     		});
	     		
	     		//调整高度
	     		adjustProcProtH();
	     		//文件
	     		$.each(data.files,function(index,value){
	     			var fileStr = '<div class="filediv"><b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>';
	     			fileStr+='<ul><li><span class="left_s">'+value.type+'</span><span class="right_s"></span></li>';
	     			fileStr+='<li><span class="left_s">'+value.ip+'</span><span class="right_s"><a href="${pageContext.request.contextPath}/resource/res-query!view.action?id='+value.id+'&pId=0&viewId=1&ntype=2" target="_blank">'+value.name+'</a></span></li>';
	     			fileStr+='<li><span class="left_text_trim w_340"title="'+value.file+'">'+value.file+'</span></li>';
	     			fileStr+='</ul><b class="b8"></b><b class="b7"></b><b class="b6"></b><b class="b5"></b></div>';
	     			
	     			$(".file .content3").append(fileStr);
	     		})
	     		
	     		//sql
	     		$.each(data.sqls,function(index,value){
	     			var sqlStr = '<div class="sqldiv"> <b class="b5"></b> <b class="b6"></b> <b class="b7"></b> <b class="b8"></b>';
	     			sqlStr+='<ul><li><span class="left_s"><a href="${pageContext.request.contextPath}/resource/res-query!view.action?id='+value.id+'&pId=0&viewId=1&ntype=2" target="_blank">'+value.name+'</a></span></li>';
	     			sqlStr+='<li><span class="left_s">'+value.ip+'</span><span class="right_s">'+value.db+'</span></li>';
	     			sqlStr+='<li><span class="left_text_trim w_340"title="'+value.sql+'">'+value.sql+'</span></li>';
	     			sqlStr+=' </ul><b class="b8"></b><b class="b7"></b><b class="b6"></b><b class="b5"></b></div>';
	     			
	     			$(".sQL .content3").append(sqlStr);
	     		})
	     		
	     		//shell
	     		$.each(data.shells,function(index,value){
	     			var sStr = '<div class="shelldiv"> <b class="b5"></b> <b class="b6"></b> <b class="b7"></b> <b class="b8"></b>';
	     			sStr+=' <ul> <li><span class="left_s"><a href="${pageContext.request.contextPath}/resource/res-query!view.action?id='+value.id+'&pId=0&viewId=1&ntype=2" target="_blank">'+value.name+'</a></span></li>';
	     			sStr+='<li><span class="left_s">'+value.ip+'</span><span class="right_s">'+value.user+'</span></li>';
	     			sStr+=' <li><span class="left_text_trim w_510" title="'+(value.shell=='' ? '':value.shell)+'">'+value.shell+'</span></li>	'
	     			sStr +='</ul><b class="b8"></b><b class="b7"></b><b class="b6"></b><b class="b5"></b></div>';
	     			
	     			$(".script .content3").append(sStr);
	     			
	     		})
	     		
	     		
	     		
	     		adjustFileSqlShellH();
	     		
	     		$(".status_tip").cluetip(
	     		{ 
     			  cluetipClass: 'jtip',
     			  arrows: true,
     			  dropShadow: false,
     			  hoverIntent: false,
     			  closePosition: 'title',
	     		  hoverClass: 'highlight',
	     		  mouseOutClose: true,
	  			  clickThrough:true,
	  			  ajaxCache: false
	  		    });
	     		
                $(".right-div2 .content1 a").cluetip({
               	  splitTitle: '|',
               	  width:120,
               	  cluetipClass: 'jtip',
       			  arrows: true,
       			  dropShadow: false,
       			  hoverIntent: false,
       			  closePosition: 'title',
   	     		  hoverClass: 'highlight',
   	     		  mouseOutClose: true,
   	  			  clickThrough:true,
   	  			  ajaxCache: false
	     		});
			},
			error:function(d){
			}
		});
	}
	
	
	$(document).ready(function() {
		initTop();
		initCpuMem();
	});
</script>
</head>
<body>
  <div class="max">
   		<jsp:include page="viewdetailtop.jsp">
        	<jsp:param name="resid" value="<%=resid %>" ></jsp:param>
        	<jsp:param name="pageno" value="2" ></jsp:param>
         </jsp:include>
	 <!--@end 手机银行系统监控一览-->

	<div id="c02" >
		    <div class="column">
			  <div class="left-div2">
			    <b class="b1"></b>
		       <b class="b2"></b>
		       <b class="b3"></b>
		       <b class="b4"></b>  		  			  
			   <div class="content1">
			   <h2>进程监控</h2>

			    
			         <!--板块-->
			         <!--  
					   <div class="container2">
							  <b class="b5"></b>
							  <b class="b6"></b>
							  <b class="b7"></b>
							  <b class="b8"></b>  
							  <div class="content2"> 
								   <ul>
								       <li><h3>isssmgp进程</h3></li>
									   <li><span class="left_s">进程状态：</span><span class="right_s">运行中</span></li>
									   <li><div class="cpu">
									   </div></li>
									   <li><span class="left_s">运行时长：</span><span class="right_s">2天11小时21分钟</span></li>
								   </ul>
							  </div> 
							  <b class="b8"></b>
							  <b class="b7"></b>
							  <b class="b6"></b>
							  <b class="b5"></b>
					  </div>
		              -->
		 	  </div>
	      </div>
			      
			   <div class="right-div2">
				   <b class="b1"></b>
			       <b class="b2"></b>
			       <b class="b3"></b>
			       <b class="b4"></b> 
				   <div class="content1">
				   <h2>端口监控</h2>
			     	  <!--板块-->
			     	  <!--  
					   <div class="container2" style="width:160px;">
							  <b class="b5"></b>
							  <b class="b6"></b>
							  <b class="b7"></b>
							  <b class="b8"></b>   
							  <div class="content2"> 
								   <ul>
								       <li class="ul_li_comm"><h3 style="width:135px;">80监听端口</h3></li>
									   <li class="ul_li_comm"><span class="left_s status_R"><a href="#" class="port_a" title="状态值含义|C 可以连通|D 不可连通">C</a></span><span class="right_s">192.168.14.221</span></li>									 
								  	   <li class="ul_li_comm"><div class="aa">
								  	   	  <fieldset ><legend>连接数量</legend><div id="port_cnt_1" class="port_cnt" cVal="3"></div></fieldset>
								  	   </div></li>
								   </ul>
							   </div> 
							  <b class="b8"></b>
							  <b class="b7"></b>
							  <b class="b6"></b>
							  <b class="b5"></b> 
					  </div>
					  -->
		 	   </div>
			  </div>
		   </div>
		   
		    <div class="column">
		    <div class="left-div2">
			  <div class="file">
			       <b class="b1"></b>
			       <b class="b2"></b>
			       <b class="b3"></b>
			       <b class="b4"></b> 			  
			     <div class="content3">
			      <h2>文件监控</h2>
			      <!-- 
			      	   <div class="filediv">
			                  <b class="b5"></b>
							  <b class="b6"></b>
							  <b class="b7"></b>
							  <b class="b8"></b>  
			             <ul>
						   <li><span class="left_s">查看文件进度</span><span class="right_s"></span></li>									 
						   <li><span class="left_s">172.168.2.210</span><span class="right_s">Linux主机:银行交易中间件日志</span></li>									 
						   <li><span class="left_text_trim w_340"title="/home/sinodata/bsm/logs/cipc/back_up/tmp/bsm.log">/home/sinodata/bsm/logs/cipc/back_up/tmp/bsm.log</span></li>	
			             </ul>
		                    <b class="b8"></b>
						    <b class="b7"></b>
						    <b class="b6"></b>
						    <b class="b5"></b>  
			          </div>
			      	  -->
		 	     </div>
			   </div>
			  
			   <div class="sQL">
			       <b class="b1"></b>
			       <b class="b2"></b>
			       <b class="b3"></b>
			       <b class="b4"></b> 			     
			     <div class="content3">
			       <h2>SQL查询监控</h2>
			       <!--  
			          <div class="sqldiv">
			                  <b class="b5"></b>
							  <b class="b6"></b>
							  <b class="b7"></b>
							  <b class="b8"></b>  
			             <ul>
						   <li><span class="left_s">查看交易每日数量</span></li>									 
						   <li><span class="left_s">172.168.2.210</span><span class="right_s">oracle:inst</span></li>									 
						   <li><span class="left_text_trim w_340"title="select * from res where id is not null and probe is not null">select * from res where id is not null and probe is not null</span></li>	
			             </ul>
		                    <b class="b8"></b>
						    <b class="b7"></b>
						    <b class="b6"></b>
						    <b class="b5"></b>  
			          </div>
			          -->
			       
		 	     </div>
			   </div>
			 </div>
			 <div class="right-div2"> 
			      <div class="script">
			       <b class="b1"></b>
			       <b class="b2"></b>
			       <b class="b3"></b>
			       <b class="b4"></b> 			   
			      <div class="content3">
			         <h2>SHELL脚本监控</h2>
			         <!-- 
			         <div class="shelldiv">
			             <b class="b5"></b>
					     <b class="b6"></b>
					     <b class="b7"></b>
					     <b class="b8"></b>  
			            <ul>
						   <li><span class="left_s">检查系统时间</span></li>									 
						   <li><span class="left_s">172.168.2.210</span><span class="right_s">Linux:sinodata</span></li>									 
						   <li><span class="left_text_trim">ps -ef|grep bsm|grep -v grep</span></li>									 
					    </ul>
					     <b class="b8"></b>
						 <b class="b7"></b>
						 <b class="b6"></b>
						 <b class="b5"></b>
			         </div>
			         -->
			       
		 	      </div>
			    </div>
			  </div>
		   </div>		   		
		</div>
	</div>
</body>
</html>

